import React from 'react'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import { AdvisorItem } from '@/types/common'
import useWorkStatus from '@/hooks/useWorkStatus'
import UpdateAdvisorButton from './UpdateAdvisorButton'
import { IconDropletHalf2, IconDropletHalf, TablerIconsProps, IconEdit, IconLogout } from '@tabler/icons-react'

type Props = {
  row: AdvisorItem
  refresh: () => void
}
type Option = {
  label: string
  key: string
  icon: (props: TablerIconsProps) => JSX.Element
  disabled?: boolean
}
const ITEM_HEIGHT = 48
const options: Option[] = [
  { label: '登出顾问账号', key: 'logout', icon: IconLogout, disabled: true },
  { label: '关闭实时开关', key: 'close_realtime', icon: IconDropletHalf },
  { label: '关闭非实时开关', key: 'close_non_realtime', icon: IconDropletHalf2 }
]
const OverviewActionButton = ({ row, refresh }: Props) => {
  const { star_ids } = row
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const [selectedOption, setSelectedOption] = useState<Option | null>(null)
  const open = Boolean(anchorEl)
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget)
  }
  const handleClose = () => {
    setAnchorEl(null)
  }

  const { offlineService, loading } = useWorkStatus()
  const handleMenuItemClick = (option: Option) => async () => {
    setSelectedOption(option)
    setAnchorEl(null)
    switch (option.key) {
      case 'close_realtime':
        await Promise.all(star_ids.map((star_id) => offlineService({ starId: star_id, type: 'realtime' })))
        break
      case 'close_non_realtime':
        await Promise.all(star_ids.map((star_id) => offlineService({ starId: star_id, type: 'nonRealtime' })))
        break
      default:
        break
    }
  }

  return (
    <>
      <IconButton
        aria-label="more"
        id="long-button"
        aria-controls={open ? 'long-menu' : undefined}
        aria-expanded={open ? 'true' : undefined}
        aria-haspopup="true"
        disabled={loading}
        onClick={handleClick}
      >
        {loading ? <CircularProgress size="1rem" /> : <MoreVertIcon />}
      </IconButton>
      <Menu
        id="long-menu"
        MenuListProps={{
          'aria-labelledby': 'long-button'
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        PaperProps={{
          style: {
            maxHeight: ITEM_HEIGHT * 4.5,
            width: '24ch'
          }
        }}
      >
        <UpdateAdvisorButton
          refresh={refresh}
          row={row}
          renderTrigger={(props) => (
            <MenuItem {...props} key="period">
              <ListItemIcon>
                <IconEdit size="1.2rem" />
              </ListItemIcon>
              <ListItemText>编辑</ListItemText>
            </MenuItem>
          )}
        />
        <Divider />
        {options.map((option) => (
          <MenuItem
            key={option.key}
            selected={option.key === selectedOption?.key}
            onClick={handleMenuItemClick(option)}
            disabled={option.disabled}
          >
            <ListItemIcon>
              <option.icon size="1.2rem" />
            </ListItemIcon>
            <ListItemText>{option.label}</ListItemText>
          </MenuItem>
        ))}
      </Menu>
    </>
  )
}

export default memo(OverviewActionButton)
